<template>
  <view>
    <!-- 导航 -->
    <detail-navigation
      type="craftsman"
      :isLight="isLight"
      :load="load"
      :changeLight="changeLight"
      :isBackg="isBackg"
    />

    <view class="head-img">
      <image src="@/static/image/common/test.png" mode="aspectFill" />
    </view>

    <view class="container">
      <!-- 骨架屏 -->
      <view class="skeleton" v-if="load">
        <view class="page-container">
          <u-skeleton rows="6" title loading />
        </view>
      </view>

      <block v-else>
        <!-- 基础信息 -->
        <craftsman-info />

        <!-- 所有服务 -->
        <all-service />
      </block>

      <evaluate :load="loadEvaluate" />
    </view>
  </view>
</template>

<script>
import craftsmanInfo from "./components/craftsmanInfo";
import allService from "./components/allService";
import evaluate from "./components/evaluate";

export default {
  components: {
    craftsmanInfo,
    allService,
    evaluate,
  },
  data() {
    return {
      load: true,
      isLight: false,
      loadEvaluate: true,
      isBackg: false,
    };
  },
  onPageScroll({ scrollTop }) {
    this.isBackg = scrollTop >= 240;
  },
  onLoad({ id }) {
    this.id = id;
    this.getDetail();
  },
  methods: {
    changeLight() {
      this.$loading();
      setTimeout(() => {
        this.isLight = !this.isLight;
        this.$loading.close();
      }, 1000);
    },
    getDetail() {
      setTimeout(() => {
        this.load = false;
        this.loadEvaluate = false;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  border-radius: 16px 16px 0px 0px;
  margin-top: -16px;
  position: relative;
}

.head-img {
  width: 100vw;
  height: 300px;

  image {
    width: 100%;
    height: 100%;
  }
}

.skeleton {
  padding: 16px;
}
</style>